<template>
  <m-layout>
    <mt-header slot="header" :title="headerText">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body" class="score-criteria">
      <m-section>
        <e-heading>{{standard.testDesc}}</e-heading>
        <m-flexbox class="score-criteria-item small"
                   justify="space-between"
                   v-for="grade in standard.standardList"
                   :key="grade.id">
          <div>{{grade.testGrade}}</div>
          <div>{{grade.minValue}}{{grade.symbol}}{{grade.maxValue}}{{standard.unitName}}</div>
        </m-flexbox>
        <ul class="score-criteria-options small weak">
          <li v-for="(item, index) in scoreRuleInfo.scoureDetaiList" :key="item.id">{{index+1}}、{{item.testDetail}}</li>
        </ul>
        <div class="score-criteria-html small weak" v-if="descInfo">
          <div v-html="descInfo.testContentDesc"></div>
        </div>
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      standard: state => state.smartCourse.standard,
      scoreRuleInfo: state => state.smartCourse.scoreRuleInfo
    })
  },
  data () {
    return {
      query: this.$route.query,
      headerText: `${this.$route.query.testItemText}评分标准${this.$route.query.ageGroupText}`,
      descInfo: {}
    }
  },
  mounted () {
    this.standardReq()
    this.itemScoreRuleInfo().then(() => {
      import('static/js/score-criteria/score-criteria-config.js').then(options => {
        this.testContentDesc(options.options)
      })
    })
  },
  methods: {
    testContentDesc (options) {
      for (let i = 0; i < options.length; i++) {
        if (this.query.ageGroupId === options[i].testAgeId) {
          const testContentList = options[i].testContentList
          for (let j = 0, l = testContentList.length; j < l; j++) {
            const testItemId = testContentList[j].testItemId
            const testContentId = testContentList[j].testContentId
            if (this.query.testItemId === testItemId && this.query.testContentId === testContentId) {
              this.descInfo = testContentList[j]
            }
          }
        }
      }
    },
    standardReq () {
      this.$store.dispatch('smartCourse/standard', {
        itemId: this.query.testContentId,
        ageId: this.query.ageGroupId
      })
    },
    itemScoreRuleInfo () {
      return this.$store.dispatch('smartCourse/itemScoreRuleInfo', {
        studentId: this.query.studentId,
        ageDictionarieId: this.query.ageGroupId,
        testDateStr: '2018-04-18',
        testMethodId: this.query.testContentId,
        testModeId: this.query.testItemId,
        sportType: '3002'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.score-criteria{
  &-item{
    padding: 0 0.24rem;
    height: 1rem;
  }
  &-options{
    padding: 0.24rem 0.4rem;
    li{
      margin: .1rem 0;
    }
  }
  &-html{
    padding: 0 0.24rem;
  }
}
</style>
